<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
     <el-row :gutter="10">
      <el-col :span="10">
         <el-input placeholder="请输入内容" class="input-with-select" clearable v-model="query" @clear="getGoodsList">
            <el-button slot="append" icon="el-icon-search" :disabled="!query" @click="searchGoods"></el-button>
         </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="addGoods">添加商品</el-button>
      </el-col>
     </el-row>
     <!-- table表格 -->
     <el-table style="width: 100%;margin:20px 0;" border :data="goodsList">
        <el-table-column type="index" align="center" label="#" width="60">
        </el-table-column>
        <el-table-column prop="goods_name" align="center" label="商品名称" width="width">
        </el-table-column>
        <el-table-column prop="goods_price" align="center" label="商品价格（元）" width="120">
        </el-table-column>
        <el-table-column prop="goods_weight" align="center" label="商品重量" width="80">
        </el-table-column>
        <el-table-column prop="time" align="center" label="创建时间" width="110">
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template v-slot="{row}">
            <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteGoods(row)"></el-button>
          </template>
        </el-table-column>
     </el-table>
     <!-- 分页器 -->
     <el-pagination
      align="center"
      :current-page="pagenum"
      :page-sizes="[3, 6, 9]"
      :page-size="pagesize"
      :pager-count="5"
      layout=" prev, pager, next, jumper,total, sizes"
      :total="total"
      @current-change="getGoodsList"
      @size-change="handleSizeChange">
     </el-pagination>
     <router-view></router-view>
    </el-card>
  </div>
</template>

<script>
// 导入第三方包，将时间戳转化为年月日时分
import dayjs from 'dayjs'

export default {
    name:'list',
    data(){
      return {
        pagenum:1, //当前页
        pagesize: 2, //每页展示多少条数据
        total: 20, //共有total条数据
        query: '', //search搜索的值
        goodsList: [], //储存商品列表数据
      }
    },
    methods:{
      // 获取商品列表数据
      async getGoodsList(pager = 1){
        this.pagenum = pager
        const {pagesize,pagenum,query} = this
        let {data:result} = await this.$API.get('goods',{params:{pagenum,pagesize,query}})
        if(result.meta.status == 200){
          // 用dayjs将result的时间戳转化为，年-月-日-时：分
          result.data.goods.forEach(item => {
            // 自己给数组添加一个属性，用来展示，年-月-日-时：分
            item.time = dayjs(item.add_time).format('YYYY-MM-DD HH:mm')
          })
          // 如果是搜索商品的话，提示
          if(query&&result.data.goods.length!=0){
            this.$message.success('以查找到相关商品')
          }
          this.goodsList = result.data.goods
          this.total = result.data.total
        }
      },
      // 分页器select选中改变时
      handleSizeChange(limit){
        this.pagesize = limit
        // 更新表格数据
        this.getGoodsList()
      },
      // 搜索某件商品
      searchGoods(){
        this.getGoodsList()
      },
      // 删除按钮
      deleteGoods(row){
        this.$confirm('是否删除该商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let {data:result} = await this.$API.delete(`goods/${row.goods_id}`)
          if(result.meta.status !== 200){
            this.$message({
              type: 'info',
              message: '删除商品失败'
            });       
          }
          this.$message.success('删除成功')
          // 刷新数据，停留在当前页
          this.getGoodsList(this.pagenum)
        }).catch(() => {
          return
        })
      },
      // 添加按钮
      addGoods(){
        this.$router.push('/goods/add')
      }
    },
    mounted(){
      this.getGoodsList()
    }
}
</script>

<style>

</style>